<!--
 * @Author: wangjianwhy wangjianwhy@sina.com
 * @Date: 2024-10-24 09:49:57
 * @LastEditors: wangjianwhy wangjianwhy@sina.com
 * @LastEditTime: 2024-10-24 10:35:43
 * @FilePath: \my-vue3-appg:\vscode-work\tlo-shopping\src\components\Message.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="alert-up" v-if="show">
      <div class="alert-msg">
          <div class="msga">
            {{ message }}
            dfajjsdflajksdfjklasjkdl
          </div>
          <div class="ok">
            <span>OK</span>
          </div>
      </div>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';

defineProps({
  show: Boolean,
  message: String
});
</script>

<style scoped>
.alert-up {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    transition: bottom 0.3s;
    z-index: 100000;
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
}
.alert-msg {
  position: fixed;
  z-index: 100001;
  background-color: #fff;
  height: auto;
  width: 90%;
  border-radius: 12px;
  top: 50%;
  margin: auto;
  transform: translate(0%, -50%);
}
.alert-msg .msga {
  margin: 5px;

}
.alert-msg .ok {
  width: 100%;
  height: 30px;
  margin: auto;
  border-top: 1px solid  #ccc;
}
.ok span {
  width: 100%;
  font-size: 14px;
  float: left;
  height: 100%;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  flex: 1;
  margin: auto;
  cursor: pointer;
}
</style>